{extend name="base"}
{block name="main"}
<style type="text/css">
  .number_a{color: #409EFF}
  .number_a:hover{text-decoration: underline;}
</style>
<div id="app" v-cloak>
    <el-row class="ws-quote">
        <el-col :span="24" >
            <el-button type="primary" size="small" @click="href('{:url('admin/finance/index')}')">前往财务管理</el-button>
            <el-input placeholder="搜索关键词" v-model="params.keyword" size="small" style="width: 350px;" clearable>
                <el-select v-model="params.cate" slot="prepend" placeholder="请选择"style="width: 100px;">
                  <el-option label="所属用户" :value="1"></el-option>
                  <el-option label="来源用户" :value="2"></el-option>
                  <el-option label="订单号" :value="3"></el-option>
                </el-select>
            </el-input>
            <el-date-picker
                  v-model="params.range"
                  type="daterange"
                  align="right"
                  unlink-panels
                  value-format="timestamp"
                  size="small"
                  range-separator="至"
                  start-placeholder="领取时间"
                  end-placeholder="领取时间"
                  :readonly="params.now_time&&params.now_time>0"
                  :picker-options="pickerOptions">
            </el-date-picker>
            <el-button type="primary" size="small" @click="search('{:url('')}')">搜索</el-button>
        </el-col>
    </el-row>


    <el-table
        :default-expand-all="false"
        border
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="ID"
          prop="id"
          :width="80"
          align="center">
        </el-table-column>
        <el-table-column
          label="所属用户"
          align="center"
          prop="user">
        </el-table-column>
        <el-table-column
          label="来源用户"
          align="center"
          prop="from">
        </el-table-column>
        <el-table-column
          label="关联订单"
          align="center"
          prop="order">
          <template slot-scope="r">
              <span class="number_a pointer" @click="showOrderInfo(r.row.order_id)">{{r.row.order}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="订单金额"
          align="center"
          sortable
          prop="order_money">
        </el-table-column>
        <el-table-column
          label="用户奖金比例"
          align="center"
          sortable
          :formatter="vipRatioFormat"
          prop="ratio">
        </el-table-column>
        <el-table-column
          label="领取金额"
          align="center"
          sortable
          prop="money">
        </el-table-column>

        <el-table-column
          label="领取时间"
          align="center"
          width="140px"
          prop="s_time"
          sortable
          :formatter="dateFormats">
        </el-table-column>
    </el-table>

    <div class="page">{$list->render()|raw}</div>

    <!-- 订单详情 start -->
    <el-dialog :title="orderInfoTitle" width="800px" :visible.sync="orderInfoShow">
        <el-row class="p_y10">
          <el-col :span="8">
            订单号：{{orderInfo.number}}
          </el-col>
          <el-col :span="8">
            支付平台订单号：
            <template v-if="orderInfo.trade_no">{{orderInfo.trade_no}}</template>
            <el-tag size="mini" type="info" v-else>无</el-tag>
          </el-col>
          <el-col :span="8">
            订单类型：
            <template v-if="orderInfo.pay_type==='alipay'">支付宝</template>
            <template v-else-if="orderInfo.pay_type==='weixinpay'">微信支付</template>
            <el-tag size="mini" type="info" v-else>测试数据</el-tag>
          </el-col>
        </el-row>
        <el-table
            border
            :data="[orderInfo]"
            style="width: 100%">
            <el-table-column
              label="商品名称"
              prop="product_name">
            </el-table-column>
            <el-table-column
              label="订单金额"
              prop="raw_money"
              align="center">
            </el-table-column>
            <el-table-column
              label="优惠卷"
              prop="coupon_money"
              align="center">
            </el-table-column>
            <el-table-column
              label="商家实付"
              prop="money"
              align="center">
            </el-table-column>
            <el-table-column
              label="手续费"
              prop="coupon_money"
              align="center">
              <template slot-scope="c">
                <template v-if="c.row.pay_type==='alipay'">{{(c.row.money*0.55/100).toFixed(2)}}</template>
                <template v-else>--</template>
              </template>
            </el-table-column>
            <el-table-column
              label="实收净额"
              prop="coupon_money"
              align="center">
              <template slot-scope="c">
                <template v-if="c.row.pay_type==='alipay'">{{c.row.money-(c.row.money*0.55/100).toFixed(2)}}</template>
                <template v-else>{{c.row.money}}</template>
              </template>
            </el-table-column>
        </el-table>
        <el-row class="p_y20">
          <el-col :span="18">
            <el-steps :active="orderInfo.state+1" finish-status="success" process-status="error">
              <el-step title="下单时间" :description="dateFormat(orderInfo.s_time*1000)"></el-step>
              <el-step title="付款时间" :description="dateFormat(orderInfo.e_time*1000)" v-if="orderInfo.state"></el-step>
              <el-step title="完成时间" icon="el-icon-location" status="wait" v-else></el-step>
            </el-steps>
          </el-col>
          <el-col :span="24" class="p_y10">
            <hr>
          </el-col>
          <el-col :span="6" :offset="1">
            买家姓名： 
              <template v-if="orderInfo.realname">{{orderInfo.realname}}</template>
              <el-tag size="mini" type="info" v-else>未完善</el-tag>
            
          </el-col>
          <el-col :span="10">
            买家电话：{{orderInfo.tel}} 
          </el-col>
        </el-row>
    </el-dialog>
    <!-- 订单详情 end -->
</div>
{/block}

<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>

{block name="vue"}
<script>
var app=new Vue({
    el:"#app",
    mixins:[wsMixins],
    data:{
        tableData:{$list->toJson()|raw}, // 列表数据
        params:{$params|raw},

        orderInfoShow:false,
        orderInfoTitle:'',
        orderInfo:{},
    },
    
    methods:{
        vipRatioFormat(row, column, val, index){
            if(val>0){
                return val+'%';
            }else{
                return '-';
            }
        },
        showOrderInfo(id){
            this._wspost("{:url('order/info')}",{id},res=>{
              this.orderInfo=res.data;
              if(res.data.is_admin){
                this.orderInfoTitle='订单详情（后台订单）';
              }else{
                this.orderInfoTitle='订单详情（前台订单）';
              }
              this.orderInfoShow=true;
            },false);
        },
    },
});
</script>
{/block}